<template>
    <div>
        {{selValue}}





        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>

        <!-- 
            1.要求el-form实现搜索栏
                问题内容 --- questionContent
                状态 --- status
                搜索和重置按钮
            2.要求使用searchFormData对象来装questionContent status
            3.将所获得的questionContent status属性的值，集成到getData接口中去
         -->

        <el-form ref="searchForm" :model="searchFormData" inline label-width="100px">
            <el-form-item label="问题内容" prop="questionContent">
                <el-input v-model="searchFormData.questionContent"></el-input>
            </el-form-item>
            <el-form-item label="状态" prop="status">
                <el-input v-model="searchFormData.status"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button @click="getData" type="primary">搜索</el-button>
                <el-button @click="reset">重置</el-button>
            </el-form-item>
            <el-button type="primary" @click="openAddDialog">新增</el-button>
        <el-dialog
            title="这是dialog标题"
            :visible.sync="dialogVisible">

            <el-form ref="form" :rules="formRules" label-width="80px" :model="formData">
                <el-form-item label="问题内容" prop="questionContent">
                    <el-input v-model="formData.questionContent"></el-input>
                </el-form-item>
                <el-form-item label="问题回答" prop="questionAnswer">
                    <el-input v-model="formData.questionAnswer"></el-input>
                </el-form-item>
                <el-form-item label="状态" prop="status">
                    <!-- <el-input v-model="formData.status"></el-input> -->
                    <el-select v-model="formData.status">
                        <el-option
                            v-for="(item, index) in options"
                            :key="index"
                            :label="item.label"
                            :value="item.value"
                        ></el-option>
                    </el-select>

                </el-form-item>
            </el-form>

            <span slot="footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button @click="confirm" type="primary">确 定</el-button>
            </span>

        </el-dialog>
        </el-form>

        <el-table :data="tableData">
            <el-table-column label="问题id" prop="questionId"></el-table-column>
            <el-table-column label="问题内容" prop="questionContent"></el-table-column>
            <el-table-column label="问题回答" prop="questionAnswer"></el-table-column>
            <el-table-column label="状态" prop="status">
                <template slot-scope="scope">
                    {{scope.row.status | filterStatus(options)}}
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="text" @click="editRow(scope.row)">编辑</el-button>
                    <el-button type="text" @click="deleteRow(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageIndex"
            :page-sizes="[10, 20, 30, 50, 100]"
            :page-size="pageSize"
            background
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>

        <!-- 
            1.生成表格
            2.表格字段增加【状态】status 启用，禁用
            3.状态字段 el-select
            4.要求有操作栏---编辑和删除按钮
            5.表格字段
             questionId
             questionContent
             questionAnswer
             status
         -->

         <!-- 要求2：
            http://127.0.0.1:3000/api/test/crud/list
            arg: pageIndex pageSize questionContent status
            拿到返回的数据渲染表格
          -->
    </div>
</template>

<script>
import axios from 'axios'
export default {
    data () {
        return {
            formRules:{
                questionContent:[
                    //当内容改变时触发校验
                    {required:true,trigger:'change',message:'这是问题内容的提示文字'}
                    
                ],
                questionAnswer:[
                     {required:true,trigger:'change',message:'这是问题回答的提示文字'}
                ],
                status:[
                     {required:true,trigger:'change',message:'这是状态的提示文字'}
                ]
                

                //问题回答使用trigger----'blur'
                //状态status---'change'


            },
            options: [
                {label: '选项1', value: '1'},
                {label: '选项2', value: '2'},
                {label: '选项3', value: '3'},
                {label: '选项4', value: '4'},
                {label: '选项5', value: '5'}
            ],
            dialogVisible: false,
            tableData: [],
            formData: {
                questionContent: '',
                questionAnswer: '',
                status: ''
            },
            searchFormData: {
                questionContent: '',
                status: ''
            },
            // 当前在第几页
            pageIndex: 1,
            pageSize: 10,
            total: 0,
            dialogType: ''
        }
    },
    filters: {
        filterStatus (value, options) {
            let index = options.findIndex(item => {
                return value === item.value
            })

            return options[index].label
        }
    },
    mounted () {
        this.getData()
    },
    methods: {
        openAddDialog () {
            this.dialogType = 'add'
            this.dialogVisible = true
        },

        // 新增要求
        // http://127.0.0.1:3000/api/test/crud/add
        // 点击新增按钮，弹出el-dialog对话框
        // el-dialog对话框中嵌套el-form
        // el-form中的表单控件有三个
        // 三个el-input  问题内容  问题回答  状态
        // el-form的foolter点击确定按钮，发送新增请求
        // 新增请求完成以后，关闭el-dialog，清空表单
        // 重新请求表格数据
        confirm () {
            this.$refs.form.validate(valid => {
                console.log(valid);


            if (valid) {
            if (this.dialogType === 'add') {
                axios.post('http://127.0.0.1:3000/api/test/crud/add', {
                    ...this.formData
                }).then(res => {
                    this.dialogVisible = false
                    this.getData()
                    this.$refs.form.resetFields()
                })
            } else if (this.dialogType === 'edit') {
                axios.put('http://127.0.0.1:3000/api/test/crud/update', {
                    ...this.formData
                }).then(res => {
                    console.log(res)
                    this.dialogVisible = false
                    this.$refs.form.resetFields()
                    this.getData()
                })
            }
            }else{
                return false
            }
           })
            
        },

        // resetFields ----> 恢复表单对象为初始化值

        // 修改要求
        // http://127.0.0.1:3000/api/test/crud/update
        // questionId questionContent questionAnswer status
        // 点击编辑按钮，打开dialog对话框
        // 拿到当前行的数据，赋值给表单，回显当前行的数据
        // 对数据进行修改
        // 点击确定，调用修改接口
        // 修改请求完成以后，关闭el-dialog，清空表单
        // 重新请求表格数据
        editRow (row) {
            this.dialogType = 'edit'
            this.dialogVisible = true
            // this.formData = {...row}

            // 官网解释：在下次dom更新之前
            // 等待数据操作完成以后，在dom完全更新之后
            this.$nextTick(() => {
                this.formData = Object.assign({}, row)
            })
        },

        // 删除要求
        // http://127.0.0.1:3000/api/test/crud/delete
        // questionId
        deleteRow (row) {
            this.$confirm('确定删除该条数据吗').then(() => {
                    axios.delete('http://127.0.0.1:3000/api/test/crud/delete', {
                        // 第一步：替换动态参数pageIndex pageSize
                        params: {
                            questionId: row.questionId
                        }
                    }).then(res => {
                        this.getData()
                })
            })
        },
        getData () {
            axios.get('http://127.0.0.1:3000/api/test/crud/list', {
                // 第一步：替换动态参数pageIndex pageSize
                params: {
                    pageIndex: this.pageIndex,
                    pageSize: this.pageSize,
                    questionContent: this.searchFormData.questionContent,
                    status: this.searchFormData.status
                }
            }).then(res => {
                this.tableData = res.data.data

                // 第二部 动态赋值分页组件的total
                this.total = res.data.total
            })
        },
        reset () {
            this.$refs.searchForm.resetFields()

            this.getData()
        },
        // 切换页码触发的方法
        // 第三步 处理pageIndex的变动
        handleCurrentChange (value) {
            console.log('当前页码', value)
            this.pageIndex = value

            this.getData()
        },
        // 分页的条数变动的时候触发的方法
        // 第四步:处理pageSize的变动
        handleSizeChange (value) {
            console.log('当前每页多少条', value)
            this.pageSize = value

            this.getData()
        },
        cancel () {
            this.$refs.form.resetFields()
            this.dialogVisible = false
        },

    }
}
</script>